<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<jsp:include page="../frame/header.jsp"></jsp:include>

<title>添加地址类信息</title>
<style>
#imgDiv div{
	margin-left:8px;
	margin-top:8px;
	position:relative;
}
.del-img{
	position:absolute;
	left:0px;
	top:0px;
	z-index:9999;
	cursor:pointer;
	display:none;
}
.gray {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: url(desaturate.svg#grayscale);
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter: grayscale(1);
}
</style>
</head>

<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div>
				<ul class="breadcrumb">
					<li><a href="#">生活信息</a> <span class="divider">/</span></li>
					<li><a href="#">地址类信息指南</a></li>
				</ul>
			</div>

			<div class="box">
				<div class="box-header well" data-original-title>
					<h2>
						<i class="icon-edit"></i> 添加地址类信息
					</h2>
					<div class="box-icon">
						<a href="#" class="btn btn-setting btn-round"><i
							class="icon-cog"></i></a> <a href="#"
							class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
						<a href="#" class="btn btn-close btn-round"><i
							class="icon-remove"></i></a>
					</div>
				</div>
				<div class="box-content">
					<form id="myform" class="form-horizontal" method="post"
						action="<c:url value="/admin/live/address" />">
						<fieldset>
							<div class="top-pills">
								<div class="tabbable">
									<!-- Only required for left/right tabs -->
									<ul class="nav nav-tabs">
										<li class="active"><a href="#tab1" data-toggle="tab">基本信息</a></li>
										<li><a href="#tab2" data-toggle="tab">详细信息</a></li>
										<li><a href="#tab3" data-toggle="tab">广告设置</a></li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane active" id="tab1">
											<input type="hidden" name="infoId" value="${address.infoId }">
											<div class="control-group">
												<label class="control-label" for="sortId">分类</label>
												<div class="controls">
													<select id="sortId" name="sortId" class="input-xlarge"
														name="liveSorts">
														<c:forEach var="sort" items="${sorts }">
															<option value="${sort.sortId }"
																<c:if test='${sort.sortId == address.sortId }'>selected</c:if>>${sort.sortName
																}</option>
														</c:forEach>
													</select>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="title">名称</label>
												<div class="controls">
													<input class="input-xlarge focused" name="title"
														check-type="required" required-message="请输入名称" id="title"
														type="text" value="${address.title }" maxlength="100">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="address">地址 </label>
												<div class="controls">
													<input class="input-xlarge" name="address" id="address"
														check-type="required" required-message="请输入地址" type="text"
														value="${address.address }">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="mapKey">谷歌位置标注 </label>
												<div class="controls">
													<input class="input-xlarge" readonly name="mapKey" id="mapKey"
														type="text" value="${address.mapKey }">
												</div>
											</div>
											<div class="control-group">
												<div class="controls">
													<div id="map_canvas" class="input-xxlarge" style="height: 300px"></div> 
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="phone">联系电话</label>
												<div class="controls">
													<input class="input-xlarge" id="phone" name="phone"
														type="text" value="${address.phone }"> <font
														color="#BD4247">如果有多个联系电话，中间请用空格隔开</font>
												</div>
											</div>

											<div class="control-group">
												<label class="control-label" for="workTime">营业时间 </label>
												<div class="controls">
													<textarea rows="3" name="workTime" class="input-xlarge">${address.workTime }</textarea>
												</div>
											</div>

											<div class="control-group">
												<label class="control-label" for="fileInput">上传缩略图</label>
												<div class="controls">
													<input class="input-file uniform_on" name="file"
														id="userHeader" type="file"> <input type="button"
														value="upload" onclick="return ajaxFileUpload();">
												</div>
												
											</div>
											<div class="control-group">
												<div class="controls">
													<img id="loading" class="hide"
													src="<c:url value="/resources/img/ajax-loader-6.gif"/>">
												<img id="picture"
													src='<c:url value="/resources/fileupload/${address.pic }"/>'
													height="100"> <input type="hidden" name="pic"
													id="pic" value="${address.pic }">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="fileInput">上传图片</label>
												<div class="controls">
													<input class="input-file uniform_on" name="file"
														id="files" type="file"> <input type="button" class="btn btn-success"
														value="upload" onclick="return ajaxFileUpload_files();">
													<img id="loading2" class="hide" src="<c:url value="/resources/img/ajax-loader-6.gif"/>">
												</div>
											</div>
											<div class="control-group">
													
												<label class="control-label" for="fileInput">&nbsp;</label>
												<div class="controls" id="imgDiv">
													
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="weblink">官方网址 </label>
												<div class="controls">
													<input class="input-xxlarge" name="weblink" id="weblink"
														type="text" value="${address.weblink }">
												</div>
											</div>
											
											<div class="control-group">
												<label class="control-label" for="commentBaseCount">评论基数</label>
												<div class="controls">
													<input class="input-xlarge" id="commentBaseCount"
														name="commentBaseCount" type="text"
														value="${address.commentBaseCount }" check-type="number">
												</div>
											</div>

											<input name="commentCount" type="hidden"
												value="${address.commentCount }"> <input
												name="praiseCount" type="hidden"
												value="${address.praiseCount }">

											<div class="control-group">
												<label class="control-label" for="praiseBaseCount">点赞基数</label>
												<div class="controls">
													<input class="input-xlarge" id="praiseBaseCount"
														name="praiseBaseCount" type="text"
														value="${address.praiseBaseCount }" check-type="number">
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tab2">
											<div class="control-group">
												<label class="control-label" for="details">详细描述</label>
												<div class="controls">
													<textarea id="details" name="details" rows="18"
														style="height:500px;width: 100%" class="">${address.details }</textarea>
												</div>
											</div>
											
										</div>
										<div class="tab-pane" id="tab3">
											<div class="control-group" id="type">
												<label class="control-label" for="status">是否启用</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="status" value="1" <c:if test="${address.advert.status == 1 }">checked</c:if>>是
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="status" value="0" <c:if test="${address.advert.status == 0 }">checked</c:if>>否
													</label>
												</div>
											</div>
											<div class="control-group" id="type">
												<label class="control-label" for="type">类型</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="type" value="1" <c:if test="${address.advert.type == 1 }">checked</c:if>>开机广告
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="type" value="2" <c:if test="${address.advert.type == 2 }">checked</c:if>>首页广告
													</label>
													<label class="radio inline"> 
														<input type="radio" name="type" value="0" <c:if test="${address.advert.type == 0 }">checked</c:if>>列表页广告
													</label> 
												</div>
											</div>
											<div class="control-group" id="type">
												<label class="control-label" for="adPos">显示位置</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="adPos" value="1" <c:if test="${address.advert.adPos == 1 }">checked</c:if>>全屏显示
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="adPos" value="0" <c:if test="${address.advert.adPos == 0 }">checked</c:if>>置顶显示
													</label>
												</div>
											</div>
											<div class="control-group" id="type">
												<label class="control-label" for="adType">广告形式</label>
												<div class="controls">
													<label class="radio inline"> 
														<input type="radio" name="adType" value="0" <c:if test="${address.advert.adType == 0 }">checked</c:if>>图片
													</label> 
													<label class="radio inline"> 
														<input type="radio" name="adType" value="1" <c:if test="${address.advert.adType == 1 }">checked</c:if>>动图
													</label>
													<label class="radio inline"> 
														<input type="radio" name="adType" value="2" <c:if test="${address.advert.adType == 2 }">checked</c:if>>视频
													</label>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="adContent">广告上传</label>
												<div class="controls">
													<input class="input-file uniform_on" name="file"
														id="file_1" type="file"> <input type="button"
														value="upload" onclick="return ajaxFileUpload_1();">
												</div>
												
											</div>
												<div class="control-group">
												<div class="controls">
													<img id="loading_1" class="hide"
													src="<c:url value="/resources/img/ajax-loader-6.gif"/>">
												<div id="picture_1"><img 
													src='<c:url value="/resources/fileupload/${address.advert.adContent }"/>'
													height="100"></div> <input type="hidden" name="adContent"
													id="adContent" value="${address.advert.adContent }">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="form-actions">
								<input type="hidden" name="advertStr" id="advertStr">
								<input type="hidden" name="images" id="images" value="${address.images }">		
								<button id="saveBtn" type="button" class="btn btn-primary">保存</button>
								<button id="cancelBtn" type="button" class="btn">返回</button>
							</div>
						</fieldset>
					</form>

				</div>
			</div>
			<!--/span-->

		</div>
	</div>
	<!--/row-->
</body>

<jsp:include page="../frame/scripts.jsp"></jsp:include>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC5Y15DCDsPAuYKL8CHYBV1dqHDBfWldto&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var images = new Array();
	$(document)
			.ready(
					function() {
						$('#cancelBtn')
								.click(
										function() {
											window.location.href = '<c:url value="/admin/live/live_address" />';
										})

						$("#myform").validation();
						
						var imgs = "${address.images}";
						if(imgs && "" != imgs){
							$.each(imgs.split(","),function(i,item){
								setImages(item);
							})
						}

						//保存
						$('#saveBtn').click(function() {
							if ($("#sortId").val() == null) {
								alert("请首先创建属于地址类信息的分类！");
								return;
							}
							var info = new Object();
							info.status = $("input[name=status]:checked").val();
							info.type = $("input[name=type]:checked").val();
							info.adPos = $("input[name=adPos]:checked").val();
							info.adType = $("input[name=adType]:checked").val();
							info.adContent = $("input[name='adContent']").val();
							
							var str = JSON.stringify(info);
							$("#advertStr").val(str);
							
							var value = images.join(",");
							$("input[name='images']").val(value);
							
							$("#myform").submit();
						})
						
						//xheditor 文件上传
						$('#details').xheditor({
							tools:'full',
							skin:'default',
							upMultiple:1,
							html5Upload:false,
							upImgUrl:'<c:url value="/xheditor/fileupload"/>',
							upImgExt:'jpg,png,jpeg,gif,bmp',
							onUpload:function(data){
								
							}
						})

					})

	//上传图片
	function ajaxFileUpload() {

		$("#loading").ajaxStart(function() {
			//开始上传文件时显示一个图片
			$(this).show();
		}).ajaxComplete(function() {
			//文件上传完成将图片隐藏起来
			$(this).hide();
		});

		$.ajaxFileUpload({
			url : '<c:url value="/fileupload"/>',//用于文件上传的服务器端请求地址
			secureuri : false,//一般设置为false
			fileElementId : 'userHeader',//文件上传空间的id属性  <input type="file" id="file" name="file" />
			dataType : 'JSON',//返回值类型 一般设置为json(大写)
			success : function(data, status) {
				var image = DOMAIN + '/resources/fileupload/' + $(data).html();
				$("#picture").attr('src', image).show();
				$("input[name='pic']").val($(data).html());
			},
			error : function(data, status, e) {
				alert(e);
			}
		})

		return false;
	}
	
	//广告上传
	function ajaxFileUpload_1() {
		var file = $("#file_1").val();
		var fileType = file.substring(file.lastIndexOf(".")+1); 
		if(fileType == ''){
			alert('请选择广告！');
			return;
		}
		fileType = fileType.toLowerCase();
		
		var adType = $("input[name=adType]:checked").val();
		
		if(adType == 0){
			$("#picture_1").html("<img width=300>");	
			if(fileType != 'png' && fileType != 'jpg' && fileType != 'bmp'){
				alert('图片类型不正确，系统支持三种图片类型：png,jpg,bmp!');
				return;
			}
		}else if(adType == 1){
			$("#picture_1").html("<img width=300>");	
			if(fileType != 'gif'){
				alert('动图类型不正确，系统仅支持gif动图!');
				return;
			}
		}else if(adType == 2){
			$("#picture_1").html("<vedio width=300>");	
			if(fileType != '3gp' && fileType != 'mp4' && fileType != 'mov'){
				//视频
				alert('视频类型不正确，系统支持三种视频类型：3gp,mp4,mov!');
				return;
			}
		}

		$("#loading_1").ajaxStart(function() {
			//开始上传文件时显示一个图片
			$(this).show();
		}).ajaxComplete(function() {
			//文件上传完成将图片隐藏起来
			$(this).hide();
		});

		$.ajaxFileUpload({
			url : '<c:url value="/fileupload"/>',//用于文件上传的服务器端请求地址
			secureuri : false,//一般设置为false
			fileElementId : 'file_1',//文件上传空间的id属性  <input type="file" id="file" name="file" />
			dataType : 'JSON',//返回值类型 一般设置为json(大写)
			success : function(data, status) {
				var image = DOMAIN + '/resources/fileupload/' + $(data).html();
				$("#picture_1").children(0).attr('src', image).show();
				$("input[name='adContent']").val($(data).html());
			},
			error : function(data, status, e) {
				alert(e);
			}
		})

		return false;
	}
	
	function setImages(item){
		var image = DOMAIN + '/resources/fileupload/'+item;
		var delImg = '<c:url value="/resources/img/del.png"/>';
		var img = '<div style="float:left;height:100px;" onmouseout="hideClose()" onmouseover="showClose(this)"><img class="del-img" onclick="delImg(this,\''+item+'\')" src="'+delImg+'"><img class="pic" src="'+image+'" height="100"></div>';
		$("#imgDiv").append(img).show();
		images.push(item);	
	}

	//上传图片
	function ajaxFileUpload_files(){
		
		$("#loading2").ajaxStart(function(){
			//开始上传文件时显示一个图片
			$(this).show();
		}).ajaxComplete(function(){
			//文件上传完成将图片隐藏起来
			$(this).hide();
		});
		
		$.ajaxFileUpload({
			url:'<c:url value="/fileupload"/>',//用于文件上传的服务器端请求地址
			secureuri:false,//一般设置为false
			fileElementId:'files',//文件上传空间的id属性  <input type="file" id="file" name="file" />
			dataType: 'JSON',//返回值类型 一般设置为json(大写)
			success: function (data, status){
				setImages($(data).html());
			},
			error: function (data, status, e){
				alert(e);
			}	
		})
		
		return false;
	}

	function showClose(obj){
		$(".del-img").hide();
		$(".pic").removeClass("gray");
		$(obj).find(".pic").addClass("gray");
		$(obj).find(".del-img").show();
	}

	function delImg(obj,value){
		$(obj).parent().remove();
		var index = $.inArray(value,images);
		images.splice(index,1);
	}

	function hideClose(){
		$(".del-img").hide();
		$(".pic").removeClass("gray");
	}
	
	/**
	* 地图标注
	*/
	var map = null;
	var marker = null;

	function initialize()
	{
		var x = 53.466706;
		var y = -2.233554;
		var point = "${address.mapKey}";
		if(point != ""){
			var p = point.substring(1,point.length-1);
			var ps = p.split(",");
			x = ps[0];
			y = ps[1];
			
		}
	  	var mapProp = {
	    	center: new google.maps.LatLng(x,y),
	    	zoom:14,
	   	 	mapTypeId: google.maps.MapTypeId.ROADMAP
	  	};
	  	map = new google.maps.Map(document.getElementById("map_canvas"),mapProp);
	  	placeMarker(new google.maps.LatLng(x,y));
	  	google.maps.event.addListener(map, 'click', function(event) {
		      placeMarker(event.latLng);
	  	});
	}
	
	function placeMarker(location) {
		if(null != marker){
			marker.setMap(null);
			marker = null;
		}
		marker = new google.maps.Marker({
			position: location,
		    map: map,
		    icon:'<c:url value="/resources/img/marker.png"/>'
		});
		map.setCenter(location);
		$("#mapKey").val(location);
	}
	
	window.onload = initialize;
</script>